<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>归档</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">-->
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/main.css">
    <link rel="stylesheet" href="../static/Semantic-UI/semantic.css">
</head>
<body>

<!--导航-->
<nav class="ui  inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">贽殿遮那de小站</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="small home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="small tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="small clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="small user icon"></i>关于我</a>
            <div class="right item">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="寻你所需....">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<div class="m-container-small m-padded-tb-big">
    <div class="ui container">

        <div class="ui top attached segment padded">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header">归档</h3>
                </div>
                <div class="right aligned column">
                    共 <h2 class="ui orange header m-inline-block m-text-thin">114</h2> 篇
                </div>
            </div>
        </div>


<!--    ............-->

        <div class="ui attached segment  accordion">
            <div class="title">
                <h2 class="ui header center aligned">2022 <i class="icon angle down"></i></h2>
            </div>
            <div class="ui fluid vertical menu content">

                    <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i>关于刻意练习的清单
                        <div class="ui basic teal left pointing label m-padded-mini">9月3日</div>
                     </span>
                     <div class="ui basic red label m-padded-mini ">原创</div>
                    </a>
                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i> [碧蓝航线]13图阵容推荐
                        <div class="ui basic teal left pointing label m-padded-mini">9月15日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i>云服务器开通mc服务器教程
                        <div class="ui basic teal left pointing label m-padded-mini">11月15日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
            </div>
        </div>

        <div class="ui attached segment accordion">
            <div class="title">
                <h2 class="ui header center aligned">2023 <i class="icon angle down"></i></h2>
            </div>
            <div class="ui fluid vertical menu content">

                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i>祝大伙新年快乐!
                        <div class="ui basic teal left pointing label m-padded-mini">1月1日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i> [APEX]滋崩奥林匹斯开滋指南
                        <div class="ui basic teal left pointing label m-padded-mini">3月4日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i>java实现图书馆管理系统
                        <div class="ui basic teal left pointing label m-padded-mini">6月17日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
            </div>
        </div>

        <div class="ui attached segment accordion">
            <div class="title">
                <h2 class="ui header center aligned">2024 <i class="icon angle down"></i></h2>
            </div>
            <div class="ui fluid vertical menu content">

                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i>2024新年快乐!
                        <div class="ui basic teal left pointing label m-padded-mini">1月1日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i> Vue3项目实战
                        <div class="ui basic teal left pointing label m-padded-mini">1月6日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i>[LOL]无限火力狱卒出装推荐
                        <div class="ui basic teal left pointing label m-padded-mini">2月3日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                       <span>
                        <i class=" teal circle icon"></i>[Semantic ui]推荐
                        <div class="ui basic teal left pointing label m-padded-mini">3月25日</div>
                     </span>
                    <div class="ui basic red label m-padded-mini ">原创</div>
                </a>
            </div>
        </div>

        <div class="ui attached segment  center aligned">

            <img src="../static/images/smy.jpg" alt="" class="ui image">
            <h1 class="ui">时间，不在于你拥有多少，而在于你怎样去使用</h1>
        </div>


</div>
</div>

<br>
<br>


<footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/shoukuan.jpg" class="ui rounded image" style="width: 110px" alt="">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="" class="item">实例1</a>
                    <a href="" class="item">实例2</a>
                    <a href="" class="item">实例3</a>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-opacity-mini">联系我</h4>
                <div class="ui inverted link list">
                    <a href="" class="item">Email: 839010963@qq.com</a>
                    <a href="" class="item">QQ同上()</a>

                </div>
            </div>
            <div class="six wide column ">

                <h4 class="m-opacity-mini">简介</h4>
                <div class="m-opacity-tiny">
                    <p>Ciallo～(∠・ω< )⌒★ &nbsp 这里是兴趣使然搭建的个人博客,会分享包括编程,动漫,游戏各种内容,成分复杂......</p>
                    <p>本人菜狗,请多指教</p>
                </div>
            </div>

        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright©2024 &nbsp  Designed by 贽殿遮那</p>
    </div>


</footer>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<script>
    $('.menu.toggle').click(function (){
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('.ui.accordion').accordion();

</script>

</body>
</html>